import React, {useRef, useEffect, useSatte, useState} from 'react';
import {
  StyleSheet,
  View,
  Text,
  SectionList,
  RefreshControl,
  StatusBar,
} from 'react-native';
import {SectionData} from '../constants/Data';

/**
 * @description: 主要注意sections一定传进数组数据
 * @return {*}
 */
function SelectList多层嵌套() {
  const data = [
    {
      title: '12312',
      data: ['0980', '3342', '0980', '3342', '0980', '3342k'],
      level: 1,
    },
    {
      title: 'Fruits',
      data: [
        {title: 'Apple', data: ['黑苹果', '红苹果'], level: 2},
        'Banana',
        'Cherry',
        'Banana',
        'Cherry',
        'Banana',
        'Cherry',
        'Banana',
        'Cherry',
        'Banana',
        'Cherry',
        'Banana',
        'Cherry',
      ],
      level: 1,
    },
    {
      title: 'Vegetables',
      data: ['Carrot', 'Tomato', 'Cucumber'],
      level: 1,
    },
  ];

  function renderItem({item, section: {title, level}}) {
    console.log('++__', item, title, level);
    // console.log(arguments);
    if (Array.isArray(item.data)) {
      console.log('----', level, item.level, '------');
      return (
        <SectionList
          sections={[item] || []} // 将对象包装在数组中
          keyExtractor={(item, index) => item + index}
          renderItem={renderItem}
          renderSectionHeader={({section: {title}}) => (
            <Text
              style={{
                fontWeight: 'bold',
                fontSize: 50 / item.level,
                paddingLeft: 10 * level,
              }}>
              {title}
            </Text>
          )}
        />
      );
    } else {
      return (
        <Text
          style={{
            fontSize: level == 1 ? 16 : 16 / level < 10 ? 10 : 16 / level,
            marginLeft: 10 * level,
          }}>
          {item}
        </Text>
      );
    }
  }

  return (
    <SectionList
      style={{height: 300}}
      sections={data}
      keyExtractor={(item, index) => item + index}
      renderItem={renderItem}
      stickySectionHeadersEnabled={true}
      k
      renderSectionHeader={({section: {title}}) => (
        <Text
          style={{
            fontSize: 30,
            fontWeight: 'bold',
            backgroundColor: '#cccccc',
          }}>
          {title}
        </Text>
      )}
    />
  );
}

const SectionList多类型分组列表7_14 = () => {
  console.log('refresh 走的----------');

  const sectionListRef = useRef(null);
  const renderItem = ({item, index, section}) => {
    return <Text style={styles.txt}>{item}</Text>;
  };

  const ListHeader = (
    <View style={styles.header}>
      <Text style={styles.extraTxt}>列表头部</Text>
    </View>
  );

  const ListFooter = (
    <View style={[styles.header, styles.footer]}>
      <Text style={styles.extraTxt}>列表尾部</Text>
    </View>
  );

  const renderSectionHeader = ({section}) => {
    return <Text style={styles.sectionHeaderTxt}>{section.type}</Text>;
  };

  const [refreshing, setRefreshing] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      sectionListRef.current.scrollToLocation({
        sectionIndex: 1, // 父亲
        itemIndex: 4, // 父亲也要算上
        viewPosition: 0,
        animated: true,
      });
    }, 2000);
  }, []);
  return (
    <View style={styles.root}>
      <Text style={{color: 'orange', fontSize: 20, textAlign: 'center'}}>
        7_14SectionList多类型分组列表
      </Text>

      {/*状态栏 */}
      <StatusBar
        barStyle="default"
        backgroundColor="transparent"
        animated={true}
        translucent={true} //如果状态栏是半透明的。当半透明设置为true时，应用程序将在状态栏下绘制。这在使用半透明状态栏颜色时非常有用。
        hidden={false}
      />
      <SectionList
        ref={sectionListRef}
        style={styles.sectionList}
        sections={SectionData}
        renderItem={renderItem}
        keyExtractor={(item, index) => `${item}-${index}`}
        contentContainerStyle={styles.containerStyle}
        showsVerticalScrollIndicator={false}
        onScroll={event => {
          // console.log(event.nativeEvent.contentOffset.y);
        }}
        keyboardDismissMode="on-drag"
        keyboardShouldPersistTaps="handled"
        ListHeaderComponent={ListHeader}
        ListFooterComponent={ListFooter}
        // 在每个部分的顶部渲染。尚不支持粘贴式页眉。
        renderSectionHeader={renderSectionHeader}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        stickySectionHeadersEnabled={true}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => {
              console.log('onRefresh ....');
              setRefreshing(true);
              // do request new data
              setTimeout(() => {
                setRefreshing(false);
              }, 1000);
            }}
          />
        }
        onEndReached={() => {
          console.log('onEndReached ...');
          // do request next page data
        }}
        onEndReachedThreshold={0.2}
      />

      <Text style={{margin: 10}}>----------------------------</Text>
      <SelectList多层嵌套 />
    </View>
  );
};

export default SectionList多类型分组列表7_14;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 800,
  },
  sectionList: {
    width: '100%',
    height: '100%',
  },
  txt: {
    width: '100%',
    height: 56,
    fontSize: 20,
    color: '#333333',
    textAlignVertical: 'center',
    paddingLeft: 16,
  },
  containerStyle: {
    // paddingHorizontal: 16,
    // paddingTop: 20,
    backgroundColor: '#F5F5F5',
  },
  header: {
    width: '100%',
    height: 48,
    backgroundColor: '#0000ff80',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    backgroundColor: '#ff000030',
  },
  extraTxt: {
    fontSize: 20,
    color: '#666666',
    textAlignVertical: 'center',
  },
  sectionHeaderTxt: {
    width: '100%',
    height: 36,
    backgroundColor: '#DDDDDD',
    textAlignVertical: 'center',
    paddingLeft: 16,
    fontSize: 20,
    color: '#333333',
    fontWeight: 'bold',
  },
  separator: {
    width: '100%',
    height: 2,
    backgroundColor: '#D0D0D0',
  },
});
